import React, { FC } from 'react';

import { TemplatePersonalInfo } from '../../../models/template-detail.types';
import { CommonListExperience } from './CommonListExperience';

const COM_PREKEY = 'CommonPersonalInfo';

interface CommonPersonalInfoProps extends TemplatePersonalInfo {}

const CommonPersonalInfo: FC<CommonPersonalInfoProps> = (props) => {
    const infoList = buildInfoList(props);

    return (
        <>
            <div className="rsmd-brf">
                <p className="rsmd-brf-nm">{props.name}</p>
                <div className="info-box">
                    {/* personal info */}
                    {infoList?.personalInfoList?.length > 0 && (
                        <div className="personal-info">
                            <CommonListExperience
                                experiences={infoList.personalInfoList}
                                specialClassName=""
                                specialKeyTitle="personal_info"
                            />

                            {/* <p className="rsmd-brf-brn">{`生日：${props.birthday?.slice(0, 7)}`}</p> */}
                        </div>
                    )}
                    {/* contact info */}
                    {infoList?.contactInfoList?.length > 0 && (
                        <div className="contact-info">
                            <CommonListExperience
                                experiences={infoList.contactInfoList}
                                specialClassName=""
                                specialKeyTitle="contact_info"
                            />

                            {/* <p className="rsmd-brf-brn">{`生日：${props.birthday?.slice(0, 7)}`}</p> */}
                        </div>
                    )}
                    {/* work info */}
                    {infoList?.workInfoList?.length > 0 && (
                        <div className="work-info">
                            <CommonListExperience
                                experiences={infoList.workInfoList}
                                specialClassName=""
                                specialKeyTitle="work_info"
                            />
                            {/* <p className="rsmd-brf-pstn">{`期望职位：${props.expectPosition}`}</p> */}
                        </div>
                    )}
                </div>

                <img
                    className="rsmd-brf-avatar"
                    src={props.avatar}
                    alt="user avatar"
                    title="user avatar"
                />
            </div>
        </>
    );
};

CommonPersonalInfo.displayName = 'CommonPersonalInfo';

function buildInfoList(info: CommonPersonalInfoProps) {
    return {
        personalInfoList: [
            info.gender,
            `生日：${info.birthday?.slice(0, 7)}`,
            `现居地：${info.currentResidence}`,
        ],
        contactInfoList: [`电话：${info.phoneNumber}`, `邮箱：${info.emailAddress}`],
        workInfoList: [
            `${info.startWorkWhen} 月开始工作`,
            `求职状态：${info.jobStatus}`,
            `期望职位：${info.expectPosition}`,
            `期望薪资：${info.expectedLowestSalary}K${
                info.expectedHighestSalary > info.expectedLowestSalary &&
                info.expectedLowestSalary > 0
                    ? ` - ${info.expectedHighestSalary}K`
                    : ''
            }`,
        ],
    };
}

export { CommonPersonalInfo, CommonPersonalInfoProps };
